<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue';

const age = ref(18)
let timerId = setInterval(() => {
  age.value++
}, 1000)

/*
 1. 创建阶段
 2. 挂载阶段
 3. 更新阶段
 4. 销毁阶段
*/

onBeforeMount(() => {
  console.log('挂载前-onBeforeMount');
})

onMounted(() => {
  console.log('挂载后-onMounted');
})

onBeforeUpdate(() => {
  console.log('数据已经变化视图没有更新-onBeforeUpdate');
})

onUpdated(() => {
  console.log('数据已经变化视图已经更新-onUpdated');
})

onBeforeUnmount(() => {
  clearInterval(timerId)
  console.log('组件销毁之前-onBeforeUnmount');
})

onUnmounted(() => {
  console.log('组件销毁之后-onUnmounted');
})
</script>

<template>
  <div class="child-page">
    <div>我是子组件---{{ age }}</div>
  </div>
</template>

<style lang="css" scoped></style>